<template>
    <div class="viewport">
        <div class="row form-horizontal">
            <!--  -->
            <div class="col-lg-4">
                <div class="check-input-btn-box">
                    <div class="check-input-btn" :class="{'start':check_start}">{{check_start?'开始扫码':'点击扫码'}}</div>
                    <input type="text" class="check-input" v-model="check_code" @focus="check_start=true" @blur="check_start=false" @keydown.enter="addGoods()">
                </div>
            </div>

            <div class="col-lg-4">
                <div class="input-group input-group-lg">
                    <input type="text" class="form-control" v-model="phone" placeholder="会员号码">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" @click="createOrderB">会员买单</button>
                    </span>
                </div>
                
            </div>
            <div class="col-lg-4">
                <button class="btn-warning btn-lg" @click="openBalance" v-if="$root.USER_TYPE==0">会员充值</button>
                <button class="btn-primary btn-lg" @click="createOrderW">现金-微信支付</button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 total-box">
                总价:{{total_price.toFixed(2)}}元(零售),{{total_pricepre.toFixed(2)}}元(会员)
                <button class="btn-primary btn-lg" @click="clearCart">清空</button>
            </div>
        </div>
        <div class="fclear">{{forclear}}</div>
        <div class="row">
            <div class="col-lg-8">
                <div class="row">
                    
                    <template v-for="(good,gk) in cart">
                        <div class="col-lg-6" :key="gk">
                            <div class="good-item">
                                {{good.name}}-<span class=" text-info">零售{{good.price}}元-会员{{good.pricePre}}元</span>
                                <a href="###" @click.prevent="addThis(good)">
                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                </a>
                                {{good.cartQty}}
                                <a href="###" @click.prevent="minusThis(good)">
                                    <i class="fa fa-minus" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>

                    </template>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="row good-list">
                    <template v-for="good in goodlist">
                        <div class="col-lg-6">
                            <div class="good-item" @click="clickAddGood(good)">
                                {{good.name}} 
                                <div class="text-info">零售{{good.price}}元-会员{{good.preferentialPrice}}元</div>
                                <div class="text-danger">数量{{good.qty}}份</div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <BalanceModal :open="balance_show" :data-obj="curr_user" @close="balanceClose" @balancedone="balanceDone"></BalanceModal>
        <ConfirmOrderBModal 
        :open="corder_b_show" :phone="corder_b_phone" 
        :level="corder_b_level" :balance="corder_b_balance" 
        :cart="corder_b_cart" 
        @close="orderBClose" @paydone="payDone"></ConfirmOrderBModal>
        <ConfirmOrderWModal 
        :open="corder_w_show" :phone="corder_w_phone" 
        :level="corder_w_level" :balance="corder_w_balance" 
        :cart="corder_w_cart" 
        @close="orderWClose" @paydone="payDone"></ConfirmOrderWModal>
        
    </div>
</template>
<script>
    import _ from 'lodash'
    import {
        tip,
        ajax
    } from '../tools/tools.js'
    import Paging from '../components/Paging.vue'
    import {cfg} from '../config/config.js'
    import BalanceModal from '../components/pay/BalanceModal.vue'
    import ConfirmOrderBModal from '../components/pay/ConfirmOrderBModal.vue'
    import ConfirmOrderWModal from '../components/pay/ConfirmOrderWModal.vue'
    export default {
        components: {
            Paging,
            BalanceModal,
            ConfirmOrderBModal,ConfirmOrderWModal
        },
        data() {
            return {
                forclear: false,
                check_start: false,
                check_code: '',

                goodlist: [],
                cart: {},
                total_price:0,
                total_pricepre:0,

                phone: '',
                user_token: '',
                user_orderid:'',

                balance_show:false,
                curr_user:{},

                corder_b_show:false,
                corder_b_phone:'',
                corder_b_level:'0',
                corder_b_balance:0,
                corder_b_cart:{},

                corder_w_show:false,
                corder_w_phone:'',
                corder_w_level:'0',
                corder_w_balance:0,
                corder_w_cart:{}  
            }
        },
        watch: {

        },
        filters: {

        },
        methods: {
            clickAddGood(v){
                this.check_code = v.codeId;
                this.addGoods();
            },
            addGoods() {
                var self = this;
                if (self.cart.hasOwnProperty(self.check_code)) {
                    self.cart[self.check_code].cartQty++;
                } else {
                    var g = _.find(self.goodlist, function (o) {
                        return o.codeId == self.check_code;
                    });
                    var obj = {
                        id: g.id,
                        name: g.name,
                        cartQty: 1,
                        codeId: g.codeId,
                        price:g.price,
                        pricePre:g.preferentialPrice
                    }
                    g.cartQty = 1
                    self.cart[self.check_code] = obj;
                }
                self.check_code = '';
                self.calcTotal();
            },
            addThis(v) {
                var self = this;
                if (self.cart.hasOwnProperty(v.codeId)) {
                    v.cartQty++;
                }
                self.forclear = !self.forclear;
                self.calcTotal();
            },
            minusThis(v) {
                var self = this;
                if (self.cart.hasOwnProperty(v.codeId)) {
                    self.cart[v.codeId].cartQty--;
                    if (self.cart[v.codeId].cartQty == 0) {
                        delete self.cart[v.codeId];
                    }
                }
                self.forclear = !self.forclear;
                self.calcTotal();

            },
            calcTotal(){
                var self = this;
                this.total_price = 0;
                this.total_pricepre = 0;
                for (const key in self.cart) {
                    if (self.cart.hasOwnProperty(key)) {
                        const element = self.cart[key];
                        var p = parseFloat(element.price)*element.cartQty;
                        var ppre = parseFloat(element.pricePre)*element.cartQty;
                        this.total_price += p;
                        this.total_pricepre += ppre;
                    }
                }
            },
            getGoodList(innerCb) {
                var self = this;
                ajax.goodsList({
                    param: {
                        token: self.$root.TOKEN
                    },
                    cb(data) {
                        if (data.datalist) {
                            self.goodlist = data.datalist;
                        }
                        if (innerCb) innerCb(data);
                    }
                })
            },
            createOrderB() {
                var self = this;
                if(self.phone.trim()==''){
                    tip.warn('请输入会员手机号')
                    return;
                }

                ajax.getUserInfo({
                    type:'post',
                    param:{
                        token:localStorage.token,
                        phone:self.phone
                    },
                    cb(data){
                        if(data.rcode!=cfg.rcode.NOREQ){
                             if(data.data.userLevel=='0'){
                                 tip.warn('用户不是会员')
                             } else {
                                 if(data.data.balance<self.total_pricepre){
                                     tip.warn(`会员余额不足,当前余额${data.data.balance}`)
                                 } else {
                                    self.corder_b_show = true;
                                    self.corder_b_phone = self.phone;
                                    self.corder_b_level = data.data.userLevel;
                                    self.corder_b_balance = data.data.balance;
                                    self.corder_b_cart = self.cart;
                                 }
                             }
                        } else {
                            tip.warn('会员不存在');
                        }
                    }
                })

            },
            orderBClose(){
                var self = this;
                self.corder_b_show = false;
                self.corder_b_phone = '';
                self.corder_b_level = '0';
                self.corder_b_balance = 0;
                self.corder_b_cart = {};

                self.cart = {};
                self.calcTotal();
            },


            createOrderW() {
                var self = this;
                ajax.getUserInfo({
                    type:'post',
                    param:{
                        token:localStorage.token,
                        phone:'0001'
                    },
                    cb(data){
                        self.corder_w_show = true;
                        self.corder_w_phone = '0001';
                        self.corder_w_level = data.data.userLevel;
                        self.corder_w_balance = data.data.balance;
                        self.corder_w_cart = self.cart;
                    }
                })

            },
            orderWClose(){
                var self = this;
                self.corder_w_show = false;
                self.corder_w_phone = '';
                self.corder_w_level = '0';
                self.corder_w_balance = 0;
                self.corder_w_cart = {};

                self.cart = {};
                self.calcTotal();
            },
            payDone(){
                this.getGoodList();
            },

            openBalance(){
                var self = this;
                if(self.phone.trim()==''){
                    tip.warn('请输入会员手机号')
                    return;
                }
                ajax.getUserInfo({
                    type:'post',
                    param:{
                        token:localStorage.token,
                        phone:self.phone
                    },
                    cb(data){
                        if(data.rcode!=cfg.rcode.NOREQ){
                            self.balance_show = true;
                            self.curr_user = data.data;
                        } else {
                            tip.warn('会员不存在')
                        }
                    }
                })
            },
            balanceClose(){
                var self = this;
                self.curr_user = {};
                self.balance_show = false;
            },
            clearCart(){
                var self = this;
                self.cart = {};
                self.calcTotal();
            },
            balanceDone(){
                var self = this;
                // self.balanceClose();
            }
        },
        mounted() {
            this.getGoodList();
        }
    }
</script>
<style scoped>
.total-box{
    font-size: 24px;
    font-weight: bold;
}

.fclear {
    display: inline;
    opacity: 0.01;
}

.good-list{
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 5px;
}

.good-list .good-item{
    font-size: 14px;
    cursor: pointer;
    background-color: #eee;
}



    .good-item {
        font-size: 24px;
        padding: 5px;
        border: solid 2px #f90;
        padding: 30px;
        margin: 6px;
    }

    .good-item .fa {
        margin: 0 6px;
        border-radius: 4px;
        padding: 3px;
        color: #fff;
        background-color: #f90;
    }

    .check-input-btn-box {
        position: relative;
        height: 60px;
    }

    .check-input-btn {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 150px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        box-sizing: border-box;
        background-color: #aaa;
        color: #fff;
        text-align: center;
    }

    .check-input-btn.start {
        background-color: #ff9900;
        color: #fff;
    }

    .check-input {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 150px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        opacity: 0.1;
        border: none;
        box-sizing: border-box;
    }
</style>